<template>
	<div class="wrapper">
		<el-carousel ref="myCarousel" :trigger="triggerMethods" :arrow="arrowMethods" :autoplay="autoplay" @change="onChange">
			<el-carousel-item v-for="(item,index) in imgList" :key="index" style="text-align:center;">
				<el-image fit="contain" v-bind:src="item" v-on:click="openImg(item)" />
			</el-carousel-item>
		</el-carousel>
		<!-- 图片放大预览 -->
		<imgViewer v-bind:imglist="imgList" ref="myimgViewer"></imgViewer>
	</div>
</template>

<script>
	import imgViewer from './imgViewer'
	export default {
		name: 'imgswiper02',
		meta: {
			descr: '轮播图-放大'
		},
		props: {
			list: Array,
			triggerMethods: String,
			arrowMethods: String,
			imgKey: {
				default: ''
			},
			autoplay: {
				default: true
			}
		},
		components: {
			imgViewer
		},
		computed: {
			showSwiper() {
				return this.list.length
			},
			imgList() {
				if (this.imgKey) {
					try {
						return this.list.map(i => i[this.imgKey]);
					} catch (error) {
						return [];
					}
				} else {
					return this.list;
				}
				return this.list;
			}
		},
		data() {
			return {
				imgViewerList: [],
				key: '',
				index: '0'
			}
		},
		methods: {
			onChange(d) {
				this.index = d + ''
			},
			openImg(d) {
				let that = this
				let index = that.$lodash.findIndex(that.imgList, function(item) {
					return item === d
				})
				that.$refs.myimgViewer.showImg(index)
			}
		},
		updated() {
			// console.log('update')
			// console.log(this.index)
			this.$refs.myCarousel.setActiveItem(this.index)
		}
	}
</script>

<style scoped>
	.wrapper {
		overflow: hidden;
		width: 100%;
		height: 500px;
		line-height: 500px;
		background: #f0f0f0;
		margin: 0 auto;
	}

	.wrapper>>>.el-carousel__container {
		width: 100%;
		height: 500px;
	}

	.wrapper>>>.el-image {
		width: 100%;
		height: 500px;
	}

	.wrapper>>>.el-carousel__arrow {
		width: 60px;
		height: 98px;
		background: #000;
		opacity: 0.2;
		border-radius: 0px;
		top: calc(50%);
		top: -moz-calc(50%);
		top: -webkit-calc(50%);
		transform: translateY(-50%);
	}

	.wrapper>>>.el-carousel__arrow i {
		font-size: 24px;
	}

	.wrapper>>>.el-carousel__indicators {
		bottom: 10px;
		display: flex;
	}
</style>